<template>
	<WithFixedPageContainer v-model:page="page">
		<!-- 搜索表单 -->
		<div class="bg-white p-2 rounded-md">
			<BasicTableFrom :formList="formList" @search="handleSearch">
				<template #menu>
					<el-button type="primary" @click="handleAddNew">新增货物</el-button>
				</template>
			</BasicTableFrom>
		</div>
		<!-- 表格 -->
		<template #table>
			<div class="h-full overflow-auto">
				<BasicTable
					:data="tableData"
					:option="tableColumns"
					v-model:page="page"
					:table-loading="loading"
				>
					<template #menu="{ row }">
						<template v-if="row.status === '启用'">
							<el-button text type="primary" @click="handleEdit(row)"
								>编辑</el-button
							>
							<el-button text type="danger" @click="handleDisable(row)"
								>停用</el-button
							>
						</template>
						<template v-else>
							<el-button text type="success" @click="handleEnable(row)"
								>启用</el-button
							>
						</template>
					</template>
				</BasicTable>
			</div>
		</template>
		<AddCargo ref="addCargoRef" />
	</WithFixedPageContainer>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus';
import { ref, reactive, computed } from 'vue';
// 新增货物
import AddCargo from './components/addCargo.vue';
const addCargoRef = ref();
// 搜索表单配置
const formList = computed((): BasicTableNameSpace.FormItemType[] => [
	{
		key: 'keyword',
		type: 'input-text',
		label: '关键字:',
		placeholder: '货物名称',
		clearable: true,
	},
]);

// 表格列配置
const tableColumns = {
	index: true,
	menuWidth: 180,
	column: [
		{ label: '货物名称', prop: 'name' },
		{ label: '单位', prop: 'unit' },
		{ label: '状态', prop: 'status' },
	],
};

const page = reactive({
	total: 0,
	currentPage: 1,
	pageSize: 30,
});

const tableData = ref([
	{
		id: 1,
		name: '机制砂',
		unit: '吨',
		status: '启用',
	},
	{
		id: 2,
		name: '碎石',
		unit: '吨',
		status: '停用',
	},
]);
const loading = ref(false);

function handleSearch(data: any) {
	// TODO: 查询逻辑
	console.log(data);
}
function handleAddNew() {
	addCargoRef.value?.open();
}
function handleEdit(row: any) {
	// TODO: 编辑客户逻辑
	console.log(row);
}
function handleDisable(row: any) {
	ElMessageBox.confirm(
		`确认要停用货物"${row.name}"吗？停用后下订单时将不能再使用该货品。`,
		'提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		},
	).then(() => {
		// TODO: 停用客户逻辑
	});
}
function handleEnable(row: any) {
	ElMessageBox.confirm(
		`确认要启用货物"${row.name}"吗？启用后该货品将可以正常下订单。`,
		'提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		},
	).then(() => {
		// TODO: 启用客户逻辑
	});
}
</script>

<style lang="scss" scoped>
.el-input {
	--el-input-width: auto;
}
</style>
